import { useNavigation } from '@react-navigation/core'
import React from 'react'
import { StyleSheet, Text, TextInput, View, TouchableWithoutFeedback } from 'react-native'
import { observer, inject } from 'mobx-react'

interface Props {
  editable:boolean,
  store?:any
}


const Header = (props: Props) => {
  const navigation = useNavigation()

  const toCityHandler = () => {
    navigation.navigate("/city")
  }
  const toSearchHandler = () => {
    navigation.navigate("/search")
  }
  const toLoginHandler = () => {
    navigation.navigate("/login")
  }
  const toMineHandler = () => {
    navigation.navigate("/user")
  }
  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={ toCityHandler }>
        <View style={styles.location}>
          <Text style={styles.text}>{ props.store.app.city }</Text>
        </View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback onPress={ toSearchHandler }>
        <View style={styles.search} >
          <TextInput placeholder='请输入搜索关键词' editable={props.editable}></TextInput>
        </View>
      </TouchableWithoutFeedback>
      {
        props.store.app.isLogin ?
          <TouchableWithoutFeedback onPress={ toMineHandler }>
            <View style={styles.location}>
              <Text style={styles.text}>我的</Text>
            </View>
          </TouchableWithoutFeedback> 
        : <TouchableWithoutFeedback onPress={ toLoginHandler }>
          <View style={styles.location}>
            <Text style={styles.text}>登录</Text>
          </View>
        </TouchableWithoutFeedback>
      }
      
    </View>
  )
}

export default inject('store')(observer(Header))

const styles = StyleSheet.create({
  container:{
    height: 44,
    backgroundColor:"#f55",
    display: 'flex',
    flexDirection:'row',
    alignItems:'center',
  },
  location:{
    display: 'flex',
    alignItems:'center',
    justifyContent:'center',
    flex: 1,
  },
  search:{
    flex: 8,
    backgroundColor:'#fff',
    borderColor:'#333',
    height: 30,
    borderRadius: 15,
    margin:5,
    paddingLeft:20
  },
  text:{
    color: '#fff',
    fontSize:16
  }
})
